<template>
	<view class="bottom">
		<view class="bottom_info">
				<view class="info_name">店铺名称</view>
				<input type="text" value="" placeholder="请输入店铺名称" />
		</view>
		<view class="bottom_info">
				<view class="info_name">PC登录密码</view>
				<input type="text" value="" placeholder="请输入PC登录密码" />
		</view>
		<view class="bottom_info">
				<view class="info_name">分类</view>
				<picker @change="bindPickerChange" :value="index" :range="gender" >
						<input class="info_choose1" :value="type" type="text" disabled="disabled" placeholder='请选择'>
				</picker>
		</view>
		<view class="bottom_info">
				<view class="info_name">电话</view>
				<input type="text" value="" placeholder="请输入电话" />
		</view>
		<view class="bottom_info">
				<view class="info_name">联系人</view>
				<input type="text" value="" placeholder="请输入联系人" />
		</view>
		<view class="bottom_info">
				<view class="info_name">地区</view>
				<input  class="info_choose2" type="text" :value="address" placeholder="请选择"  :disabled="true" @click="show = true"/>
				
		</view>
		<view class="bottom_info">
				<view class="info_name">营业地址</view>
				<input type="text" value="" placeholder="请输入营业地址" />
		</view>
		<view class="bottom_info">
				<view class="info_name">地址搜索</view>
				<input type="text" value="" placeholder="请输入地址搜索"  />
		</view>
	</view>
</template>

<script>
export default {
    props: {
        img: {
            type: String,
            default: [],
        },
    },
    components: {},
    data() {
        return {
			show: false,
			type: "",
			address: "",
			gender: ['京东', '淘宝'],
			
		};
    },
    computed: {},
    methods: {
		bindPickerChange: function(e) {
			// console.log('picker发送选择改变，携带值为', e.target.value)
			// console.log('picker发送选择改变，携带值为', e.target.value)
			let a = e.target.value;
			// console.log(this.gender[a],'111')
			// console.log('index',a)
			this.type = this.gender[a]
		},
		onPlace(val) {	
			this.province = val.province.label;
			this.city = val.city.label;
			this.area = val.area.label;
			this.address =  val.province.label+ " " +val.city.label+ " "+val.area.label
		}
	},
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
};
</script>

<style lang="scss" scoped>
	.bottom{
		padding-bottom: 60rpx;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

	.bottom_info{
		background-color: #fff;	
		padding: 42rpx 24rpx;
		display: flex;
		position: relative;
		justify-content: space-between;
		border-bottom: 2rpx #eee solid;
		image{
				width: 24px;
				height: 24px;
		}
		input{
			// width: 236rpx;
			float:right;
			text-align: right;
		}
		// .info_choose1{
		// 	padding-left: 370rpx;
		// 	width: 84rpx;
		// }
		.info_choose1{
			padding-right: 36rpx;
			color: #999;
			&::before {
				width: 24px;
				height: 24px;
				content: "";
				position: absolute;
				right: 24rpx;
				top: 55%;
				transform: translateY(-60%);
				background-image: url(/static/img/arrow_right.png);
				background-repeat: no-repeat;
				background-size: 100%;
			}
		}
		.info_choose2{
			padding-right: 36rpx;
			color: #999;
			&::before {
				width: 24px;
				height: 24px;
				content: "";
				position: absolute;
				right: 24rpx;
				top: 42rpx;
				background-image: url(/static/img/arrow_right.png);
				background-repeat: no-repeat;
				background-size: 100%;
			}
		}

	}
}
</style>
